<style scoped>
    .reg {
        position: absolute;
        display: flex;
        width: 100%;
        margin-top: 30px;
    }
    .reg_box{
        display: flex;
        flex-direction: column;
        width: 400px;
        margin: auto;
    }
    .reg_btn{
        margin: auto;
    }
</style>

<template>
    <div class="reg">
        <div class="reg_box">
            <h2>欢迎注册</h2>
            <el-input v-model="user.username" placeholder="Username" @blur="cofimeUsername"></el-input>
            <span style="color:red" v-show="user_error">用户名已经被使用</span>
            <el-input v-model="user.password" placeholder="Password" show-password></el-input>
            <el-input v-model="password_again" placeholder="Password Again" show-password @blur="checkPassword"></el-input>
            <span style="color:red" v-show="pwd_error">两次输入的密码不一致</span>
            <el-input v-model="user.name" placeholder="Name" ></el-input>
            <el-input v-model="user.email" placeholder="Email"></el-input>
            <el-input v-model="user.phone" placeholder="Phone"></el-input>
            <el-input v-model="user.country" placeholder="Country"></el-input>
            <el-input v-model="user.city" placeholder="City"></el-input>
            <el-input v-model="user.addr1" placeholder="Addr1"></el-input>
            <el-input v-model="user.addr2" placeholder="Addr2"></el-input>
            <div class="reg_btn">
                <el-button type="primary" @click="doReg">注册</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import * as axios from 'axios'
import { baseURL } from '../../config'
import { Loading } from 'element-ui'
import router from '@/router'
export default {
    name: 'reg',
    data() {
        return{
            user: {
                username:'',
                password:'',
                name:'',
                email:'',
                phone:'',
                country:'',
                city:'',
                addr1:'',
                addr2:'',
            },
            password_again: '',
            user_error: false,
            pwd_error: false,
            loading: null,

        }
    },
    methods: {
        doReg(){
            if (this.user.password !== this.password_again){
                this.$message.warning("两次输入的密码不一致");
                return;
            }
            else{
                this.loading = Loading.service();
                axios({
                    method: 'post',
                    url: baseURL + '/account/register',
                    data: this.user
                }).then(res=>{
                    this.loading.close();
                    if (res.data.status === 0){
                        this.$message.success(res.data.msg);
                        router.push("/login");
                    }
                    else{
                        this.$message.warning(res.data.msg);
                    }
                }).catch(error=>{
                    this.loading.close();
                    this.$message.error("其他服务器错误"+error)
                })
            }
        },
        // 对比用户名
        cofimeUsername(){
            if (this.username !== ''){
                axios({
                    method: 'get',
                    url: baseURL + '/account/confirm-user',
                    params: {
                        'username': this.user.username
                    }
                }).then(res => {
                    this.user_error = (res.data.status === 0)? false : true;
                })
            }
        },
        //检查密码
        checkPassword(){
            this.pwd_error = (this.user.password !== this.password_again)?true:false
        }
    }

}
</script>